<script lang="ts" setup>
interface Columns {
  prop: string
  label: string
  renderCell?: Function
}
interface Props {
  columns: Columns[]
  data: Record<string, any>[]
}
const props = withDefaults(defineProps<Props>(), {
  columns: () => [],
  data: () => [],
})

</script>

<template>
  <el-table :data="props.data">
    <el-table-column v-for="item in props.columns" :key="item.prop" :label="item.label">
      <template #default="{ row }">
        <jsxRender v-if="item.renderCell" :params="row" :render="item.renderCell" />
        <span v-else>{{ row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>